<template>
    <div class="system-dict p-4 bg-white rounded-lg shadow-sm border border-gray-200">
        <h2 class="text-lg font-medium pb-2">编号规则</h2>
        <div class="flex flex-wrap justify-between items-center pb-2 gap-2">
            <el-form :model="formModel" class="mb-4 flex flex-wrap items-end gap-4" inline label-suffix=":">
                <el-form-item label="规则名称" prop="typeName">
                <el-input v-model="formModel.typeName" placeholder="请输入规则名称"/>
            </el-form-item>
                <el-form-item label="规则描述" prop="description">
                    <el-input v-model="formModel.description" placeholder="请输入其他描述"/>
                </el-form-item>
                <el-form-item label="规则状态" label-width="80px" prop="status">
                    <el-select v-model="formModel.status" :fit-input-width="false" placeholder="全部"
                               style="width: 120px;">
                        <el-option :value="1" label="启用"/>
                        <el-option :value="0" label="禁用"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <template #default>
                        <el-button :icon="'Search'" type="primary" @click="search">搜索</el-button>
                        <el-button :icon="'Refresh'" plain type="info"
                                   @click="reset">重置
                        </el-button>
                    </template>
                </el-form-item>
            </el-form>
        </div>
        <div class="flex flex-wrap justify-between items-center pb-2 gap-2">
            <!-- 左侧操作 -->
            <div class="flex flex-wrap gap-2">
                <el-button
                    icon="Plus"
                    plain
                    type="primary"
                    @click="handleAdd"
                >
                    新增
                </el-button>
                <el-button
                    icon="Delete"
                    plain
                    type="danger"
                    @click="handleBatchDelete"
                >
                    批量删除
                </el-button>
            </div>
            <div class="flex flex-wrap gap-2">
                <el-button icon="Refresh" @click="refresh">刷新</el-button>
            </div>
        </div>
    </div>

</template>

<script setup>
import {computed, reactive, ref} from "vue";
import {useRouter} from 'vue-router';
import {ElMessage, ElMessageBox} from "element-plus";

const search = () => {
}
const reset = () => {
}
const formModel = reactive({})

const handleAdd = () => {
}

const handleBatchDelete = () => {

}
const refresh = ()=>{}
</script>

<style lang="scss" scoped>
:deep(.el-table) .table-header, :deep(.el-table) .table-header-row {
    color: #0f0f0f;
    font-weight: bold;
    background-color: #f0f0f0
}

:deep(.el-table) :deep(.el-table__header) {
    background-color: #0005f5;
}
</style>